<template>
	<div :class="['h-input-number', size]">
		<button :disabled="numberValue===min" @click="reduceNumber">-</button>
		<input type="text" v-model.number="numberValue" title=""/>
		<button @click="addNumber" :disabled="numberValue===max">+</button>
	</div>
</template>

<script>
	export default {
		name: "inputNumber",
		props: {
			value: {
				type: Number,
				default: 1
			},
			min: {
				type: Number
			},
			max: {
				type: Number
			},
			size: {
				type: String,
				default: 'default'
			}
		},
		computed: {
			numberValue: {
				get() {
					return this.value
				},
				set(newValue) {
					if (typeof newValue !== 'number') {
						newValue = 1;
					}
					this.$emit('input', Math.round(newValue))
				}
			}
		},
		methods: {
			addNumber() {
				this.numberValue++;
			},
			reduceNumber() {
				this.numberValue--;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../assets/css/_function";

	.h-input-number {
		display: inline-flex;
		align-items: center;
		input, button {
			border: 1px solid #efefee;
			text-align: center;
			font-size: pr(35);
			background: #fff;
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		button {
			font-size: pr(40);
			&:first-child {
				border-radius: pr(10) 0 0 pr(10);
			}
			&:last-child {
				border-radius: 0 pr(10) pr(10) 0;
			}
		}
		button:disabled {
			background: #f5f4f9;
		}
	}

	.default {
		input, button {
			width: pr(119);
			height: pr(96);
		}
	}

	.small {
		button {
			width: pr(69);
			height: pr(71);
		}
		input {
			width: pr(97);
			height: pr(71);
		}
	}
</style>
